<template>
	<div class="hot">
		<div class="heada2">
			<div> <el-link type="primary" @click="back()"></el-link></div>
		</div>
		<div class="health">
			<div class="filex">
				<el-image :src="imageUrl" style="width: 100%;height: 100%;"></el-image>
				<input type="file" ref="upfile" @change="onFileChange">
			</div>
			<div class="health1">
				<el-form label-position="top" :model="form" ref="form" :rules="rules">
					<el-form-item label="类型-整数" prop="type">
						<el-input v-model="form.type" placeholder='类型可自定义： 1=轮播图 2=广告 ....'>
						</el-input>
					</el-form-item>
					<el-form-item label="优先级-整数" prop="hot">
						<el-input v-model="form.hot" placeholder='数字越大，显示在前面'></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="memo">
						<el-input type="textarea" v-model="form.memo"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('form')">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		name: 'hotupdate',
		data() {
			return {
				id: 0,
				form: {
					id: 0,
				},
				imageUrl: '',
				rules: {
					type: [{
						required: true,
						message: '请输入',
						trigger: 'blur',
					}],
					hot: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					memo: [{
							required: true,
							message: '请输入',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 500,
							message: '长度 3 到 500 个字符',
							trigger: 'blur'
						}
					],
				}
			}

		},
		created() {
			this.id = this.$route.query.id;
			if (this.id != 0) {
				this.$axios.get(`api/adm/hot/findById/${this.id}`).then((res) => {
					if (res.status == 200) {
						this.form = res.data.data
						console.log('图片'+this.form.picture);
						this.imageUrl = 'http://127.0.0.1:80/api/public/showimg/' + this.form.picture
					}
				}).catch((error) => {
					console.log(error);
				})
			}
		},
		methods: {
			onFileChange(event) {
				const file = event.target.files[0];
				if (file) {
					const reader = new FileReader();
					reader.onload = (e) => {
						this.imageUrl = e.target.result;
					};
					reader.readAsDataURL(file);
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let filex = this.$refs.upfile.files[0];
						let param = new FormData();
						param.append("pic", filex);
						param.append("id", this.form.id);
						param.append("hot", this.form.hot);
						param.append("type", this.form.type);
						param.append("memo", this.form.memo);

						this.$axios.post('api/adm/hot/add', param, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						}).then((res) => {
							if (res.status == 200) {
								this.$router.push({
									path: '/adm/hotPic'
								})
								this.$message({
									message: "添加成功",
									type: "success"
								})
							}
						}).catch((error) => {
							console.log(error);
						})
					} else {
						this.$message({
							message: '验证失败',
							type: 'error'
						})
						return false;
					}
				});
			},
			back(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.hot {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.hot .heada2 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 1vw;
	}

	.hot .health .filex {
		width: 400px;
		height: 400px;
		display: flex;
		text-align: center;
		border: 1px solid black;
		background-color: #fafafa;
	}

	.hot .health .filex img {
		width: 100%;
		text-align: center;
		height: 100%;
	}

	.hot .health .filex input[type='file'] {
		width: 400px;
		height: 400px;
		text-align: center;
		position: absolute;
		opacity: 0;
	}

	.hot .health {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		width: 100%;
		margin-top: 2vw;
	}

	.hot .health .health1 {
		width: 50%;
	}
</style>